<template>
  <div id="app">
    <todo-header></todo-header>
    <!-- <todo-input @add='addTodoItem'></todo-input> -->
    <todo-input></todo-input>
    <!-- <todo-list :todos='todos' @removeItem='removeTodoItem'></todo-list> -->
    <todo-list :todos='todos'></todo-list>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoInput from './components/TodoInput'
import TodoList from './components/TodoList'

let index = 3
export default {
  name: 'App',
  data: function () { // 将todo-list中的todos数据提升到app中以便，在todo-input、todo-list中也能够使用
    return {
      todos: [{
        id: 1,
        title: '复习Javascript',
        completed: false
      },
      {
        id: 2,
        title: '复习CSS',
        completed: false
      }]
    }
  },
  components: {
    TodoHeader,
    TodoInput,
    TodoList
  },
  created () {
    // 在Vue实例创建之后执行的方法
    // 在 事件总线(event-bus) 上绑定事件，用于接收数据
    this.$bus.$on('remove', this.removeTodoItem)
    this.$bus.$on('modify', this.modifyTodoItem)
    this.$bus.$on('add', this.addTodoItem)
  },
  methods: {
    addTodoItem (title) {
      this.todos.push({
        id: index++,
        title,
        completed: false
      })
    },
    removeTodoItem (id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    modifyTodoItem (id) {
      this.todos = this.todos.map(todo => {
        const copy = { ...todo }
        if (copy.id === id) {
          copy.completed = !copy.completed
        }
        return copy
      })
    }
  }
}
</script>

<style lang="scss">

</style>
